<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
</head>

<body>

	<!-- 会议室预约 begin -->
	<div class="layui-card">
		<div class="layui-card-header">
			<h3>会议室预约</h3>
		</div>
		<div class="layui-card-body">

			<div id="meeting-room" class="mb10"></div>

		</div>
	</div>
	<!-- 会议室预约 end -->

<style>
#meeting-room .hd {height:30px;line-height: 30px;text-align: center;width:200px;margin:0 auto 10px;}
#meeting-room .hd a {float:left;padding:0 8px;transition: all .3s ease;}
#meeting-room .hd a:hover {background-color:#f5f5f5;border-radius:1em;}
#meeting-room .hd span {float:left;font-size: 20px;margin:0 15px;}
#meeting-room table {width:100%;border-collapse:collapse;}
#meeting-room table td,#meeting-room table th {border:1px solid #e6e6e6;height:60px;}
#meeting-room table th {font-weight: normal;background:#f5f5f5;}
#meeting-room table td>div {display: -webkit-flex;display: flex;-webkit-flex-direction:column;flex-direction:column;height:100%;}
#meeting-room table td>div>div {flex:1;}
#meeting-room table tr td:first-child {width:180px;padding:0 10px;}
#meeting-room .select-time>div:hover {background:#e8e8e8;position: relative;}
#meeting-room .select-time>div[data-type]:not([data-tips]):hover:after {content:attr(data-type);text-align: center;color:#a19fab;position: absolute;text-align: center;width:100%;top:3px;}
</style>

<script>
layui.use(['jquery','util','layer'],function(){
	var $ = layui.jquery,
		layer = layui.layer,
		util    = layui.util;

	$.fn.metting = function(date){
		// 会议室,bg背景色在生成的时候随机给值存入数据
		// start:开始时间段，end：结束时间段，title：要显示的会议信息
		var meetingRoom = {
			'3号楼2-1会议室':{
				'2020-04-21':{
					metting:[
						{start:'9:00',end:'10:30',title:'9:00 ~ 10:30 杨兵 - 运营会议 ',bg:'#78e578'},
						{start:'12:30',end:'16:00',title:'12:30 ~ 16:00 冯超 - 售后报告解读',bg:'#e2fd9a'},
						{start:'17:00',end:'18:00',title:'17:00 ~ 18:00 冯超 - 售后报告 ',bg:'#fdbc75'},
					]
				},
				'2020-04-22':{
					metting:[
						{start:'8:30',end:'15:00',title:'8:30 ~ 15:00 孙文娟 - 培训',bg:'#d2e8ff'},
						{start:'16:00',end:'17:30',title:'16:00 ~ 17:30 销售培训--蛋白与代谢',bg:'#e170b7'},
					]
				},
			},
			'25号楼多功能厅':{
			},
			'25号楼东区会议室（一）':{
				'2020-04-22':{
					metting:[
						{start:'9:00',end:'11:30',title:'9:00 ~ 11:30 会议1 ',bg:'#484368'},
						{start:'15:00',end:'15:30',title:'15:00 ~ 15:30 会议2',bg:'#080'},
						{start:'15:30',end:'18:30',title:'15:30 ~ 18:30 会议3',bg:'#f80'},
					]
				},				
			},
			'25号楼东区会议室（二）':{
			},
			'25号楼东区会议室（三）':{
			},
			'25号楼东区洽谈室（一）':{
			},
			'25号楼东区洽谈室（二）':{
			},
			'25号楼东区洽谈室（三）':{
			},
		}

		var _MEETINGHEAD,// 会议室head
			_MEETINGBODY,// 会议室body
			_MEETINGDATE = '';//日期

		_MEETINGHEAD = '<div class="hd"><a href="javascript:;" class="layui-icon layui-icon-left" lay-active="datePrev"></a><span>'+date+'</span><a href="javascript:;" class="layui-icon layui-icon-right" lay-active="dateNext"></a></div>';

		var _hour = 24;//小时制
		for(var i=0;i<_hour;i++){
			_MEETINGDATE += '<th data-hour="'+i+'">'+i+':00</th>';
		}

		var _roomArr = ''; //房间预定信息
		$.each(meetingRoom,function(key,d){
			var _tdArr = '';
			if(meetingRoom[key][date]){ // 如果这个会议室当天有预定的信息
				var _tds = [];
				for(var i=0;i<_hour;i++){
					_tds.push('');
				}
				var _td='';
				//遍历当前会议室的所有会议
				$.each(meetingRoom[key][date].metting,function(index,item){
					//console.log(item)
					//var _len = meetingRoom[key][date].metting.length; // 会议数量
					var _s = item.start.split(':'),
						_e = item.end.split(':');
					for(var i=0;i<_hour;i++){
						if(i == _s[0]){// 开始时间
							for(var a=i;a<=_e[0];a++){ //开始时间到结束时间范围
								var _temp='';
								if(_e[0] == a && _e[1] == '30'){//结束时间等于当前，结束时间是30
									_temp += '<div data-type="00" style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div><div data-type="30"></div>';
								}
								else if(Number(_e[0]) > Number(_s[0])){//结束时间 大于 开始时间
									if(a<_e[0] && a>_s[0] || a == _s[0] && _s[1]=='00'){// 从00开始，当前大于开始小于结束，占用全部时间
										_temp += '<div style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div>';
									}
									else if(_s[1]=='30' && a==_s[0]){//开始时间从30分，当前等于开始时间
										_temp += '<div data-type="00"></div><div data-type="30" style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div>';
									}
									//else if(_e[1]=='30' && a==_e[0]){//结束时间30分，当前等于结束时间
										//_temp += '<div data-type="00" style="background:'+item.bg+'" class="layui-tips" data-tips="'+item.title+'" data-placement="top"></div><div data-type="30"></div>';
										//_flag = true;
									//}
								}
								if(_tds[a]){
									_tds[a]=_tds[a].replace('<div data-type="30"></div>','')
									_temp = _temp.replace('<div data-type="00"></div>','');
								}
								_tds[a] += _temp;
							}
						}
					}
				})

				$.each(_tds,function(a,b){
					if(b){
						_td += '<td><div class="select-time">'+b+'</div></td>';
					}else{
						_td += '<td><div class="select-time"><div data-type="00"></div><div data-type="30"></div></div></td>';
					}
				})
				_tdArr += _td;
			}else{
				for(var i=0;i<_hour;i++){
					_tdArr += '<td><div class="select-time"><div data-type="00"></div><div data-type="30"></div></div></td>';
				}
			}
			_roomArr += '<tr><td>'+key+'</td>'+_tdArr+'</tr>'
		})
		_MEETINGBODY = '<table>'+
					   '	<thead><tr><th>会议室名称</th>'+_MEETINGDATE+'</tr></thead>'+
					   '	<tbody>'+_roomArr+'</tbody>'+
					   '</table>';
		$(this).html(_MEETINGHEAD + _MEETINGBODY);
	}

	$('#meeting-room').metting('2020-04-22'); //显示特定日期的预定信息

	/**
	 * 添加会议室预约
	 * 注释：点击任何一个格子都能弹出预约框。
	 * 在空白格子内点击，会获取会议室名称和时间
	 * 当点击以预约的格子，需要获取相关的数据进行赋值，并可进行修改
	 */
	$('body').on('click','#meeting-room .select-time>div',function(){
		var _tdIndex = $(this).parent().parent().index();
		var _name = $(this).parents('tr').children('td:first-child').html();
		//var _date = $('#meeting-room .hd span').html();
		var _type = $(this).data('type');//获取当前时间段里，是前30分钟，还是后30分钟
		var _time = $('#meeting-room table thead th').eq(_tdIndex).data('hour');//获取当前时间段
		var _startTime;
		if(_type == '00'){
			_startTime = _time+':'+'00'
		}else{
			_startTime = _time+':'+'30'
		}

		layer.open({
			type:2,
			title:'会议室预约',
			content:['popup_会议室预约.html','no'],
			area:['600px',],
			offset:'200px',
			success:function(layero,index){
				var iframe = window['layui-layer-iframe' + index];
				iframe.getMeetingVal({//执行子层方法
					name:_name,
					startTime:_startTime,
				});
			}
		})
	});

	// 切换日期
	util.event('lay-active',{
		datePrev:function(){// 上一日
			$('#meeting-room').metting('2020-04-21'); 
		},
		dateNext:function(){// 下一日
			$('#meeting-room').metting('2020-04-22'); 
		}
	});


});
</script>

</body>
</html>
